import { Image } from 'antd';
import { useState, useEffect } from 'react';

import commonService from '@/api/services/commonService';
import enterpriseIcon from '@/assets/img/enterpriseIcon.png';

export default function GiftPage() {
  const [banner1, setBanner1] = useState<any>({});
  const [list2, setList2] = useState<any>([]);
  const [list3, setList3] = useState<any>([]);
  const [current, setCurrent] = useState<number>(0);

  useEffect(() => {
    commonService.getFrontApi('createEnterprise', {}).then((res) => {
      setBanner1(res.banner1);
      setList2(res.list2);
      setList3(res.list3);
    });
  }, []);

  const toDesign = (url: string) => {
    // window.location.href = url;
    window.location.href = `/#/editor`;
  };

  const jump = (url: string) => {
    window.location.href = url;
  };

  const items = ['刺绣', '数字直接印刷', '软板印刷', '植绒印花', '热升华', '丝网印刷'];

  return (
    <div className="enterprise relative left-[50%] ml-[-712px] mt-[40px] flex w-[1424px] flex-col">
      <div>首页 / 创作 / 企业</div>
      <div className="banner1 relative mt-[20px] h-[500px]">
        <Image src={banner1.picPath} alt="" preview={false} />
      </div>
      <div className="banner2 mb-[100px] mt-[100px] text-center">
        <div className="text-[28px] text-[#363A44]">适合所有职业和场合</div>
        <div className="mt-[20px] flex justify-center gap-[20px]">
          {list2.map((item: any) => (
            <div
              key={item.id}
              className="flex w-[330px] cursor-pointer flex-col"
              onClick={() => jump(item.href)}
            >
              <div className="h-[330px] w-[330px] overflow-hidden">
                <Image className="!w-[330px]" src={item.picPath} preview={false} />
              </div>
              <div className="mt-[10px] text-left">{item.title}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="banner3 mb-[120px] text-center">
        <div className="text-[28px] text-[#363A44]">我们的印刷类型和印后处理技术</div>
        <div
          className="menu-wrap mt-[20px] flex justify-center"
          style={{ borderBottom: '1px solid #E8E9EC' }}
        >
          <div className="flex flex-row gap-[100px]">
            {items.map((item, index) => {
              return (
                <div
                  key={item}
                  onClick={() => setCurrent(index)}
                  className={[
                    'h-40px',
                    'leading-[40px]',
                    'cursor-pointer',
                    'text-center',
                    'text-[20px]',
                    current === index ? 'tab-active' : '',
                  ].join(' ')}
                >
                  {item}
                </div>
              );
            })}
          </div>
        </div>
        <div className="mt-[40px] flex h-[400px] items-center">
          <div className="w-[550px]" style={{ flexShrink: 0 }}>
            <Image src={list3[current]?.picPath} preview={false} />
          </div>
          <div className="bg[#F2F3F7] h-[100%] bg-[#F2F3F7] pl-[60px] pr-[50px] pt-[60px]">
            <div className="mb-[20px] flex text-left text-[16px] text-[#363A44]">
              <div className="check mr-[10px] h-[24px] w-[24px] rounded-[50%] bg-[#ffffff]">
                <Image src={enterpriseIcon} preview={false} />
              </div>
              持久而充满活力的结果
            </div>
            <div className="mb-[20px] flex text-left text-[16px] text-[#363A44]">
              <div className="check mr-[10px] h-[24px] w-[24px] rounded-[50%] bg-[#ffffff]">
                <Image src={enterpriseIcon} preview={false} />
              </div>
              广泛的线颜色
            </div>
            <div className="mb-[20px] flex text-left text-[16px] text-[#363A44]">
              <div className="check mr-[10px] h-[24px] w-[24px] rounded-[50%] bg-[#ffffff]">
                <Image src={enterpriseIcon} preview={false} />
              </div>
              适用于许多产品，包括：Polo 衫、帽子、围裙、连帽衫
            </div>
            <div className="mt-[40px] text-left text-[16px] text-[#686B73]">
              如果您正在寻找一种经久耐用且经得起时间考验的抛光技术，请考虑刺绣。刺绣在材料上略微凸起，会感觉有质感。
            </div>
            <div className="mt-[20px] flex">
              <div
                onClick={() => toDesign(list3[current]?.href)}
                className="h-[70px] w-[180px] cursor-pointer rounded-[8px] bg-[#FD7901] text-center text-[28px] leading-[70px] text-[#ffffff]"
              >
                去创作
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
